<template>
    <v-container class="mt-4">

        <v-row class="grey lighten-3 pa-2" dense>
            <v-col :md="3" :sm="6" >
                <span class="font-weight-bold">姓名:</span>
                <span class="ml-2"> {{user.name}}</span>
            </v-col>
            <v-col :md="3" :sm="6" >
                <span class="font-weight-bold">电话号码:</span>
                <span class="ml-2"> {{user.mobile}}</span>
            </v-col>
            <v-col :md="3" :sm="6" v-if="user.org">
                <span class="font-weight-bold">所属组织:</span>
                <span class="ml-2"> {{user.org.name}}</span>
            </v-col>
            <v-col :md="3" :sm="6" v-else>
                <span class="font-weight-bold">所属组织:</span>
                <v-dialog v-model="addOrgDialog" width="500" v-if="is_supper">
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn  text  color="primary" x-small v-bind="attrs" v-on="on">
                            升级为组织用户
                        </v-btn>
                    </template>
                    <v-form ref="orgForm">
                        <v-card>
                            <v-card-title>
                                <span class="text-h5">变更为组织用户</span>
                            </v-card-title>
                            <v-card-text>
                                <v-row>
                                    <v-col cols="12">
                                        <AutocompleteOrg :rules="[rules.required]" v-model="orgSelected"></AutocompleteOrg>
                                    </v-col>
                                </v-row>
                            </v-card-text>
                            <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn  depressed   @click="addOrgDialog = false" :disabled="orgSaving">
                                关闭
                            </v-btn>
                            <v-btn   depressed  color="primary" dark  @click="addOrg()" :loading="orgSaving">
                                确定
                            </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-form>
                </v-dialog>
            </v-col>
            <v-col :md="3" :sm="6" >
                <span class="font-weight-bold">岗位:</span>
                <span class="ml-2"> {{user.role}}</span>
            </v-col>
            <v-col :md="3" :sm="6" >
                <span class="font-weight-bold">性别:</span>
                <span class="ml-2"> {{user.gender_name}}</span>
            </v-col>
            <v-col :md="3" :sm="6" >
                <span class="font-weight-bold">状态:</span>
                <span class="ml-2"> {{user.status_name}}</span>
            </v-col>
             <v-col :md="3" :sm="6" >
                <span class="font-weight-bold">金币:</span>
                <span class="ml-2"> {{user.ticket}} </span>
                <v-dialog v-model="chargeTicketDialog" width="500" v-if="is_supper">
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn  text  color="primary" x-small v-bind="attrs" v-on="on">
                            充值
                        </v-btn>
                    </template>
                    <v-form ref="chargeTicketForm">
                        <v-card>
                            <v-card-title>充值</v-card-title>
                            <v-card-text>
                                <v-text-field
                                    label="金币"
                                    type="number"
                                    v-model="ticketAmount"
                                    :rules="[rules.required, rules.positive]"
                                ></v-text-field>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn @click="chargeTicketDialog = false" >
                                    关闭
                                </v-btn>
                                <v-btn color="primary" @click="rechargeTicket('add')" :loading="chargingTicket">
                                    保存
                                </v-btn>
                                </v-card-actions>
                        </v-card>
                 </v-form>
                </v-dialog>


                 <v-dialog v-model="chargeTicketRemoveDialog" width="500" v-if="is_supper">
                     <template v-slot:activator="{ on, attrs }">
                         <v-btn  text  color="primary" x-small v-bind="attrs" v-on="on">
                             扣除
                         </v-btn>
                     </template>
                     <v-form ref="chargeTicketRemoveForm">
                         <v-card>
                             <v-card-title>扣除</v-card-title>
                             <v-card-text>
                                 <v-text-field
                                     label="次数"
                                     type="number"
                                         v-model="ticketRemoveAmount"
                                     :rules="[rules.required, rules.positive]"
                                 ></v-text-field>
                             </v-card-text>
                             <v-card-actions>
                                 <v-spacer></v-spacer>
                                 <v-btn @click="chargeTicketRemoveDialog = false" >
                                     关闭
                                 </v-btn>
                                 <v-btn color="primary" @click="rechargeTicket('remove')" :loading="chargingTicket">
                                     保存
                                 </v-btn>
                             </v-card-actions>
                         </v-card>
                     </v-form>
                 </v-dialog>
            </v-col>
             <v-col :md="3" :sm="6" >
                <span class="font-weight-bold">账户余额:</span>
                <span class="ml-2"> {{user.money}} </span>
                <v-dialog v-model="chargeDialog" width="500" v-if="is_supper">
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn  text  color="primary" x-small v-bind="attrs" v-on="on">
                            充值
                        </v-btn>
                    </template>
                    <v-form ref="chargeForm">
                        <v-card>
                            <v-card-title>充值</v-card-title>
                            <v-card-text>
                                <v-text-field
                                    label="金额"
                                    type="number"
                                    v-model="chargeAmount"
                                    :rules="[rules.required, rules.positive]"
                                ></v-text-field>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn @click="chargeDialog = false" >
                                    关闭
                                </v-btn>
                                <v-btn color="primary" @click="recharge('add')" :loading="charging">
                                    保存
                                </v-btn>
                                </v-card-actions>
                        </v-card>
                 </v-form>
                </v-dialog>

                 <v-dialog v-model="chargeRemoveDialog" width="500" v-if="is_supper">
                     <template v-slot:activator="{ on, attrs }">
                         <v-btn  text  color="primary" x-small v-bind="attrs" v-on="on">
                             扣除
                         </v-btn>
                     </template>
                     <v-form ref="chargeRemoveForm">
                         <v-card>
                             <v-card-title>扣除</v-card-title>
                             <v-card-text>
                                 <v-text-field
                                     label="扣除"
                                     type="number"
                                     v-model="chargeRemoveAmount"
                                     :rules="[rules.required, rules.positive]"
                                 ></v-text-field>
                             </v-card-text>
                             <v-card-actions>
                                 <v-spacer></v-spacer>
                                 <v-btn @click="chargeRemoveDialog = false" >
                                     关闭
                                 </v-btn>
                                 <v-btn color="primary" @click="recharge('remove')" :loading="charging">
                                     保存
                                 </v-btn>
                             </v-card-actions>
                         </v-card>
                     </v-form>
                 </v-dialog>
            </v-col>
            <v-col :md="3" :sm="6" >
                <span class="font-weight-bold">邀请码:</span>
                <span class="ml-2"> {{user.invite_code}}</span>
            </v-col>
            <v-col :md="3" :sm="6" >
                <span class="font-weight-bold">邀请人数:</span>
                <span class="ml-2"> {{user.invite_count}}</span>
            </v-col>
            <v-col :md="3" :sm="6" >
                <span class="font-weight-bold">加入时间:</span>
                <span class="ml-2"> {{user.created_at}}</span>
            </v-col>
        </v-row>

        <v-tabs class="mt-2">
            <v-tab :to="`${this.prefix}/${this.id}`" exact replace>客户列表</v-tab>
            <v-tab :to="`${this.prefix}/${this.id}/call`" replace>通话记录</v-tab>
            <v-tab :to="`${this.prefix}/${this.id}/money`" replace>资金流水</v-tab>
            <v-tab :to="`${this.prefix}/${this.id}/ticket`" replace>金币流水</v-tab>
            <v-tab :to="`${this.prefix}/${this.id}/kyc`" replace>实名认证</v-tab>
        </v-tabs>

        <router-view></router-view>
    </v-container>
</template>

<script>
    import axios from "axios";
    import { mapGetters } from 'vuex';
    import AutocompleteOrg from "../../widgets/AutocompleteOrg.vue";

    export default {
    data: () => ({
        user: {},
        id: 0,
        rules: {
            required: value => !!value || '必填',
            positive: v => (v &&  /^([1-9][0-9]*)$/.test(v) ) || '必须大于0的正整数',
        },
        chargeDialog: false,
        chargeAmount: '',

        chargeRemoveDialog: false,
        chargeRemoveAmount: '',

        chargeTicketDialog: false,
        ticketAmount: '',
        chargeTicketRemoveDialog: false,
        ticketRemoveAmount: '',

        charging: false,
        addOrgDialog: false,
        orgSaving: false,
        orgSelected: null,
        prefix: '',
        chargingTicket: false,
    }),

    components: {
        AutocompleteOrg,
    },

    watch: {
        id(v) {
            this.load();
        }
    },
    computed: {
        ...mapGetters([
            'is_supper',
            'is_manager'
        ]),
    },

    created() {
        this.id = this.$route.params.id;
        if (this.$route.path.startsWith("/app/user")) {
            this.prefix = '/app/user';
        } else {
            this.prefix = '/user';
        }
    },

    beforeRouteUpdate(to, from, next) {
        this.id = to.params.id;
        next();
    },


    methods: {
            load() {
                axios.get(`/user/${this.id}`).then((response) => {
                    this.user = response.data.data;
                })
                .catch(function () {})
                .then(function () {});
            },

            rechargeTicket(_type) {
                if(_type == 'add'){
                    if (!this.$refs.chargeTicketForm.validate()) {
                        return;
                    }
                }
                if(_type == 'remove'){
                    if (!this.$refs.chargeTicketRemoveForm.validate()) {
                        return;
                    }
                }
                const that = this;
                that.chargingTicket = true;
                axios.post(`/user/ticket/recharge`, { amount: this.ticketAmount,amountRemove: this.ticketRemoveAmount, toUser: this.id}).then((response) => {
                    if (response.data.code == 0) {
                        that.load();
                        that.chargeTicketDialog = false;
                        that.ticketAmount = '';
                        that.chargeTicketRemoveDialog = false;
                        that.ticketRemoveAmount = '';
                    }
                    this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                }).catch(function () {})
                .then(function () {
                    that.chargingTicket = false;
                });
            },
            recharge(_type) {
               if(_type == 'add'){
                   if (!this.$refs.chargeForm.validate()) {
                       return;
                   }
               }
                if(_type == 'remove'){
                    if(!this.$refs.chargeRemoveForm.validate()){
                        return;
                    }
                }
                const that = this;
                that.charging = true;
                axios.post(`/user/money/recharge`, { amount: this.chargeAmount,amountRemove: this.chargeRemoveAmount, toUser: this.id}).then((response) => {
                    if (response.data.code == 0) {
                        that.load();
                        that.chargeDialog = false;
                        that.chargeRemoveDialog = false
                        that.chargeAmount = '';
                        that.chargeRemoveAmount = '';
                    }
                    this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                }).catch(function () {})
                .then(function () {
                    that.charging = false;
                });
            },

            addOrg() {
                if (!this.$refs.orgForm.validate()) {
                  return;
                }

                const that = this;
                that.orgSaving = true;
                axios.post( `/user/${this.id}`, {id: this.id, org: this.orgSelected }).then((response) => {
                    if (response.data.code == 0) {
                        that.load();
                        that.addOrgDialog = false;
                    }

                    this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                }).catch(function () {})
                .then(function () {
                    that.orgSaving = false;
                });
            }
        }
    };
</script>
